<template>
  <div class="carousel-section">
    <!-- 前景内容 -->
    <el-row :gutter="20">
      <!-- 左侧菜单 -->
      <el-col :xs="24" :sm="5">
        <h1 class="classh1"><b>所有分类</b></h1>
        <div class="side-menu">
          <!-- 分类树 -->
          <div class="category-sidebar">
            <el-menu
              :default-active="activeCategory.toString()"
              @select="handleCategorySelect"
            >
              <el-menu-item
                v-for="item in catalogData"
                :key="item.firstCatalog.id"
                :index="item.firstCatalog.id.toString()"
                @mouseenter.native="hoverCategory(item.firstCatalog.id)"
                @mouseleave.native="hideSubCategories"
                :class="{ 'is-hovered': item.firstCatalog.id === hoveredCategory }"
              >
                <i
                  :class="getIconClass(item.firstCatalog.id)"
                  style="margin-right: 8px;"
                ></i>
                <span>{{ item.firstCatalog.name }}</span>
              </el-menu-item>
            </el-menu>
          </div>
          <!-- 子分类面板 -->
          <div
            class="sub-category-panel"
            v-if="showSubCategories && hoveredCategory"
            @mouseenter="enterSubPanel"
            @mouseleave="leaveSubPanel"
          >
            <div class="sub-category-content">
              <div v-for="item in catalogData" :key="item.firstCatalog.id">
                <div v-if="item.firstCatalog.id === hoveredCategory">
                  <h4>{{ item.firstCatalog.name }}</h4>
                  <div class="sub-category-list">
                    <div
                      v-for="child in item.childrenCatalog"
                      :key="child.id"
                      class="sub-category-item"
                    >
                      <span
                        class="sub-category-title"
                        @click="handleSubCategorySelect(child.id)"
                      >
                        {{ child.name }}
                      </span>
                      <div class="third-category-list" v-if="child.children && child.children.length">
                        <span
                          v-for="grandchild in child.children"
                          :key="grandchild.id"
                          class="third-category-title"
                          @click.stop="handleSubCategorySelect(grandchild.id)"
                        >
                          {{ grandchild.name }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <!-- 中间内容 -->
      <el-col :xs="24" :sm="14">
        <div class="main-banner">
          <div class="top-nav">
            <ul>
              <li><a href="/html/coupon.html">领券中心 <span class="icon">🎟️</span></a></li>
              <li><a href="/html/cheap.html">9.9元专区 <span class="icon">💰</span></a></li>
              <li><a href="/html/hot.html">爆款推荐 <span class="icon">🔥</span></a></li>
              <li><a href="/html/clearance.html">清仓特卖 <span class="icon">🛒</span></a></li>
              <li><a href="/html/stock.html">备货找料 <span class="icon">📦</span></a></li>
              <li><a href="#">品牌中心 <span class="icon">🏷️</span></a></li>
            </ul>
          </div>
          <el-carousel height="460px" :interval="2000" arrow="always" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="background-banner height=460px">
                <el-carousel height="460px" :interval="2000" arrow="never" indicator-position="none">
                  <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                    <div class="background-content" :style="{ backgroundImage: `url(${item.background})` }"></div>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>

      <!-- 右侧登录卡片 -->
      <el-col :xs="24" :sm="5">
        <div class="gift-title">领取新人大礼包</div>
        <div class="login-card">
          <div class="login-banner">
            <div class="user-greeting">
              <i class="el-icon-user"></i>
              <span v-if="!isLoggedIn">Hi~欢迎来到多氟多商城!</span>
              <span v-else>欢迎您，{{ username }}!</span>
            </div>
            <div class="promo-sections">
              <template v-if="!isLoggedIn">
                <div class="promo-item new-user">
                  <el-button type="primary" @click="handleLogin">登录</el-button>
                </div>
                <div class="promo-item plus-member">
                  <el-button type="primary" plain @click="handleRegister">注册</el-button>
                </div>
              </template>
              <template v-else>
                <div class="promo-item user-options">
                  <el-dropdown trigger="click" class="user-dropdown">
                    <span class="user-profile">
                      <el-avatar :src="userAvatar" size="small" class="avatar"></el-avatar>
                      <span class="username">{{ username }}</span>
                      <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="user-menu">
                      <el-dropdown-item @click.native="goToDashboard">
                        <i class="el-icon-s-platform"></i> 进入后台
                      </el-dropdown-item>
                      <el-dropdown-item @click.native="handleLogout">
                        <i class="el-icon-switch-button"></i> 退出
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </div>
          </div>

          <div class="process-steps">
            <div class="process-type-switch">
              <el-button
                type="text"
                :class="{ active: activeProcessType === 'purchase' }"
                @click="activeProcessType = 'purchase'"
              >采购流程</el-button>
              <el-button
                type="text"
                :class="{ active: activeProcessType === 'supply' }"
                @click="activeProcessType = 'supply'"
              >供应流程</el-button>
            </div>
            <h3>{{ activeProcessType === 'purchase' ? '采购流程' : '供应流程' }}</h3>
            <ul>
              <li v-for="(step, index) in (activeProcessType === 'purchase' ? processSteps : supplySteps)" :key="index">
                <span class="step-num">{{ index + 1 }}</span>
                <span class="step-text">{{ step }}</span>
              </li>
            </ul>
          </div>
          <div class="customer-service">
            <i class="el-icon-service"></i>
            <span>客服电话：xxx-xxxx-xxxx</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 深层盖楼：热销商品楼层 -->
    <div class="hot-sales-floors">
      <div v-for="(floor, floorIndex) in hotSalesFloors" :key="floorIndex" class="floor-section">
        <div class="floor-header">
          <h2 class="floor-title">{{ floor.title }} <span class="hot-icon">🔥</span></h2>
          <a :href="floor.link" class="more-link">查看更多 <i class="el-icon-arrow-right"></i></a>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="(product, index) in floor.products" :key="index">
            <div class="hot-sales-card">
              <img :src="product.image" :alt="product.title" class="hot-sales-image" />
              <h3>{{ product.title }}</h3>
              <p>{{ product.subtitle }}</p>
              <span class="price">{{ product.price }}</span>
              <a :href="product.link" class="cta-link">{{ product.ctaText }} <i class="el-icon-arrow-right"></i></a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { fetchCategoryTree } from '@/api/official';
import defAva from '@/assets/images/profile.jpg';

export default {
  name: 'CarouselSection',
  data() {
    return {
      currentIndex: 0,
      catalogData: [],
      activeCategory: 0,
      showSubCategories: false,
      hoveredCategory: null,
      isMouseOverSubPanel: false,
      hideTimeout: null,
      carouselItems: [
        {
          background: 'https://static.zibovip.top/imgs/2025/05/b33dc9776d8b02b1.jpg'
        },
        {
          background: 'https://static.zibovip.top/imgs/2025/05/d619d4699c9d7ffd.jpg'
        },
        {
          background: 'https://static.zibovip.top/imgs/2025/05/a87a83b3f0e5e1a5.jpg'
        }
      ],
      processSteps: [
        '注册账号',
        '完善信息',
        '发布需求',
        '挑选商品',
        '在线交易'
      ],
      notices: [
        '平台升级公告',
      ],
      supplySteps: [
        '账号注册',
        '平台审核资质',
        '上架商品',
        '在线签订合同',
        '交易完成'
      ],
      activeProcessType: 'purchase',
      hotSalesFloors: [
        {
          title: '工业设备热销',
          link: '/category/industrial-equipment',
          products: [
            {
              title: '智能焊接设备',
              subtitle: '高效稳定，工业级品质',
              price: '¥12,999',
              ctaText: '立即抢购',
              image: '/img/hot01.jpg',
              link: '/product/001'
            },
            {
              title: '数控机床',
              subtitle: '高精度加工利器',
              price: '¥45,000',
              ctaText: '立即抢购',
              image: '/img/hot02.jpg',
              link: '/product/002'
            },
            {
              title: '工业机器人',
              subtitle: '自动化生产首选',
              price: '¥98,000',
              ctaText: '立即抢购',
              image: '/img/hot03.jpg',
              link: '/product/003'
            },
            {
              title: '激光切割机',
              subtitle: '精准高效切割',
              price: '¥29,999',
              ctaText: '立即抢购',
              image: '/img/hot04.jpg',
              link: '/product/004'
            }
          ]
        },
        {
          title: '原材料热销',
          link: '/category/raw-materials',
          products: [
            {
              title: '高纯度铝材',
              subtitle: '优质原材料，广泛应用',
              price: '¥3,500/吨',
              ctaText: '立即抢购',
              image: '/img/raw01.jpg',
              link: '/product/005'
            },
            {
              title: '不锈钢板',
              subtitle: '耐腐蚀高强度',
              price: '¥5,200/吨',
              ctaText: '立即抢购',
              image: '/img/raw02.jpg',
              link: '/product/006'
            },
            {
              title: '工程塑料',
              subtitle: '高性能工业用料',
              price: '¥2,800/吨',
              ctaText: '立即抢购',
              image: '/img/raw03.jpg',
              link: '/product/007'
            },
            {
              title: '铜合金',
              subtitle: '导电性优异',
              price: '¥7,500/吨',
              ctaText: '立即抢购',
              image: '/img/raw04.jpg',
              link: '/product/008'
            }
          ]
        },
        {
          title: '加工服务热销',
          link: '/category/processing-services',
          products: [
            {
              title: '精密零件加工',
              subtitle: '定制化高精度加工',
              price: '¥2,800起',
              ctaText: '立即抢购',
              image: '/img/service01.jpg',
              link: '/product/009'
            },
            {
              title: '模具制造',
              subtitle: '快速交付高品质',
              price: '¥4,500起',
              ctaText: '立即抢购',
              image: '/img/service02.jpg',
              link: '/product/010'
            },
            {
              title: '表面处理',
              subtitle: '多种工艺选择',
              price: '¥1,200起',
              ctaText: '立即抢购',
              image: '/img/service03.jpg',
              link: '/product/011'
            },
            {
              title: '3D打印服务',
              subtitle: '快速原型定制',
              price: '¥3,000起',
              ctaText: '立即抢购',
              image: '/img/service04.jpg',
              link: '/product/012'
            }
          ]
        }
      ]
    };
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      username: state => state.user.name,
      userAvatar: state => state.user.avatar || defAva
    }),
    isLoggedIn() {
      return !!this.token;
    }
  },
  created() {
    this.fetchCategoryTree();
    if (this.token) {
      this.$store.dispatch('GetInfo').catch(() => this.$store.dispatch('FedLogOut'));
    }
  },
  beforeDestroy() {
    if (this.hideTimeout) {
      clearTimeout(this.hideTimeout);
    }
  },
  methods: {
    handleLogin() {
      this.$router.push('/login');
    },
    handleRegister() {
      this.$router.push('/register');
    },
    handleLogout() {
      this.$store
        .dispatch('LogOut')
        .then(() => {
          this.$router.push('/login');
          this.$message.success('退出登录成功');
        })
        .catch(err => this.$message.error(`退出登录失败: ${err.message}`));
    },
    goToDashboard() {
      this.$router.push('/index');
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
    getIconClass(id) {
      const iconMap = {
        1: 'el-icon-s-order',
        2: 'el-icon-grid',
        3: 'el-icon-setting',
        4: 'el-icon-truck',
        5: 'el-icon-office-building'
      };
      return iconMap[id] || 'el-icon-menu';
    },
    async fetchCategoryTree() {
      try {
        const response = await fetchCategoryTree();
        if (response && response.code === 200 && Array.isArray(response.data)) {
          this.catalogData = response.data.map(item => ({
            firstCatalog: {
              id: item.firstCatalog.id,
              name: item.firstCatalog.name,
              level: item.firstCatalog.level,
              status: item.firstCatalog.status
            },
            childrenCatalog: item.childrenCatalog.map(child => ({
              id: child.id,
              name: child.name,
              level: child.level,
              status: child.status,
              children: child.children.map(grandchild => ({
                id: grandchild.id,
                name: grandchild.name,
                level: grandchild.level,
                status: grandchild.status,
                children: grandchild.children || []
              }))
            }))
          }));
          console.log('分类数据:', this.catalogData);
        } else {
          console.error('分类树数据格式不正确');
          this.catalogData = [];
        }
      } catch (error) {
        console.error('Failed to fetch category tree:', error);
        this.catalogData = [];
      }
    },
    hoverCategory(categoryId) {
      console.log('鼠标悬浮在一级分类上：', categoryId);
      clearTimeout(this.hideTimeout);
      this.hoveredCategory = categoryId;
      this.showSubCategories = true;
    },
    enterSubPanel() {
      console.log('鼠标进入子分类面板');
      clearTimeout(this.hideTimeout);
      this.isMouseOverSubPanel = true;
      this.showSubCategories = true;
    },
    leaveSubPanel() {
      console.log('鼠标离开子分类面板');
      this.isMouseOverSubPanel = false;
      this.hideTimeout = setTimeout(() => {
        if (!this.isMouseOverSubPanel) {
          this.showSubCategories = false;
          this.hoveredCategory = null;
          console.log('隐藏子分类面板');
        }
      }, 200);
    },
    hideSubCategories() {
      console.log('鼠标移出一级分类');
      this.hideTimeout = setTimeout(() => {
        if (!this.isMouseOverSubPanel) {
          this.showSubCategories = false;
          this.hoveredCategory = null;
          console.log('隐藏子分类面板');
        } else {
          console.log('子面板上有鼠标，保持显示');
        }
      }, 200);
    },
    handleSubCategorySelect(categoryId) {
      // 将分类ID存储在sessionStorage中
      sessionStorage.setItem('category_id', categoryId);
      
      // 跳转到采购页面，与搜索栏跳转相同的页面
      this.$router.replace({
        path: '/supply/supplypurch/purchprodinfo',
        query: { 
          timestamp: new Date().getTime() // 添加时间戳避免缓存问题
        }
      });
      
      setTimeout(() => {
        window.location.reload();
      }, 100);
    },
    handleCategorySelect(index) {
      console.log('Selected category index:', index);
      const categoryId = parseInt(index);
      
      // 将分类ID存储在sessionStorage中
      sessionStorage.setItem('category_id', categoryId);
      
      // 跳转到采购页面，与搜索栏跳转相同的页面
      this.$router.replace({
        path: '/supply/supplypurch/purchprodinfo',
        query: { 
          timestamp: new Date().getTime() // 添加时间戳避免缓存问题
        }
      });
      
      this.showSubCategories = false;
      this.hoveredCategory = null;
      this.isMouseOverSubPanel = false;
      
      setTimeout(() => {
        window.location.reload();
      }, 100);
    }
  }
};
</script>

<style lang="scss" scoped>
.carousel-section {
  position: relative;
  margin-bottom: 20px;

  .background-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;

    .el-carousel {
      border-radius: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .el-carousel-item {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .background-content {
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  }

  .el-row {
    position: relative;
    z-index: 1;
    max-width: 100%;
    margin: 0 auto;
  }

  .classh1 {
    font-size: 19px;
    color: #ef0505;
  }

  .side-menu {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    background: rgb(248, 249, 250);
    border-radius: 8px;
    padding: 5px;
    color: #fff;
    height: 100%;
    position: relative;

    .category-sidebar {
      background: transparent;
      border-radius: 8px;
      padding: 8px 0;

      .el-menu {
        border-right: none;
        background: transparent;
        color: #fff;

        .el-menu-item {
          padding: 0 20px;
          font-size: 15px;
          color: #050505;
          height: 48px;
          line-height: 48px;
          transition: all 0.3s ease;

          &:hover {
            background-color: #eff3f4;
            color: #409eff;
          }

          &.is-hovered {
            background-color: #eff2f4;
            color: #409eff;
          }
        }
      }
    }

    .sub-category-panel {
      position: absolute;
      top: 0;
      left: 100%;
      width: 450%;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      padding: 20px;
      z-index: 9999;
      max-height: 600px;
      overflow-y: auto;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      opacity: 1;
      visibility: visible;

      &[v-if="false"] {
        opacity: 0;
        visibility: hidden;
      }

      .sub-category-content {
        h4 {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 15px;
          color: #333;
          padding-bottom: 10px;
          border-bottom: 1px solid #514f4f;
        }

        .sub-category-list {
          .sub-category-item {
            margin-bottom: 15px;
            display: flex;
            align-items: center;

            .sub-category-title {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              cursor: pointer;
              display: inline-block;
              padding: 8px 12px;
              border-radius: 4px;
              transition: all 0.3s ease;
              margin-right: 10px;

              &:hover {
                color: #409eff;
                background-color: #f5f7fa;
              }
            }

            .third-category-list {
              display: inline-flex;
              flex-wrap: wrap;
              gap: 8px;
              vertical-align: middle;

              .third-category-title {
                font-size: 13px;
                color: #666;
                cursor: pointer;
                padding: 6px 12px;
                border-radius: 4px;
                transition: all 0.3s ease;
                background-color: #f9f9f9;

                &:hover {
                  color: #409eff;
                  background-color: #e6f7ff;
                }
              }
            }
          }
        }
      }
    }
  }

  .main-banner {
    .el-carousel {
      border-radius: 8px;
      overflow: hidden;
      width: 100%;
    }

    .top-nav {
      background: white;
      border-bottom: 1px solid #eee;
      font-weight: 700;
      font-size: 14px;
      text-align: center;
      padding: 8px 0;
    }

    .top-nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 30px;
    }

    .top-nav ul li a {
      color: #333;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .top-nav ul li a:hover {
      color: #ff5000;
    }

    .icon {
      font-size: 16px;
      user-select: none;
    }

    .el-carousel-item {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }

  .gift-title {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    color: #d93025;
    margin-bottom: 15px;
    text-align: center;
    animation: festiveBounce 2.2s ease-in-out infinite, festiveGlow 3s ease-in-out infinite;
    transform-origin: center bottom;
  }

  @keyframes festiveBounce {
    0%, 100% {
      transform: scale(1);
      color: #d93025;
      text-shadow: 0 0 5px #d93025;
    }
    50% {
      transform: scale(1.1);
      color: #ff5722;
      text-shadow:
        0 0 8px #ff5722,
        0 0 15px #ff5722,
        0 0 20px #ff5722;
    }
  }

  @keyframes festiveGlow {
    0%, 100% {
      text-shadow:
        0 0 5px #d93025,
        0 0 10px #d93025;
    }
    50% {
      text-shadow:
        0 0 12px #ff7043,
        0 0 25px #ff7043,
        0 0 35px #ff7043,
        0 0 45px #ff7043;
    }
  }

  .login-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    height: auto;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    .login-banner {
      background: #f5f7fa;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;

      .user-greeting {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        i {
          font-size: 20px;
          color: #666;
          margin-right: 8px;
        }

        span {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }

      .promo-sections {
        display: flex;
        gap: 10px;

        .promo-item {
          flex: 1;
          padding: 10px;
          border-radius: 8px;
          text-align: center;

          &.new-user {
            background: #ffe6e6;
          }

          &.plus-member {
            background: #fffbe6;
          }

          &.user-options {
            background: #e6f7ff;
          }

          .user-dropdown {
            .user-profile {
              display: flex;
              align-items: center;
              color: #333;
              padding: 6px 12px;
              border-radius: 20px;
              background: rgba(255, 255, 255, 0.8);
              transition: all 0.3s ease;
              cursor: pointer;

              &:hover {
                background: #fff;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              }

              .avatar {
                margin-right: 8px;
                border: 2px solid #fff;
              }

              .username {
                font-size: 13px;
                margin-right: 6px;
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .user-menu {
              border-radius: 8px;
              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }

    .process-steps {
      margin-bottom: 20px;

      h3 {
        font-size: 16px;
        margin-bottom: 15px;
        color: #333;
      }

      ul {
        list-style: none;
        padding: 0;

        li {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .step-num {
            width: 24px;
            height: 24px;
            background: #3a5ba0;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
          }
        }
      }
    }

    .customer-service {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;

      i {
        margin-right: 8px;
        color: #3a5ba0;
      }
    }
  }

  .process-type-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;

    .el-button {
      color: #666;
      padding: 4px 12px;
      border-radius: 15px;
      transition: all 0.3s;

      &.active {
        background: #ff6200;
        color: #fff;
      }
    }
  }

  .hot-sales-floors {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .floor-section {
    margin-bottom: 40px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .floor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .floor-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;

    .hot-icon {
      color: #ff5000;
      font-size: 24px;
      vertical-align: middle;
    }
  }

  .more-link {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;

    &:hover {
      color: #66b1ff;
    }

    i {
      margin-left: 5px;
    }
  }

  .hot-sales-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: auto;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .hot-sales-image {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 10px;
    }

    h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .price {
      display: block;
      font-size: 16px;
      color: #ff5000;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .cta-link {
      color: #409eff;
      text-decoration: none;
      font-size: 14px;
      display: inline-flex;
      align-items: center;

      &:hover {
        color: #66b1ff;
      }

      i {
        margin-left: 5px;
      }
    }
  }

  @keyframes colorChange {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
}
</style>
